<template>
	<view class="message-details">
		
		<view class="message-details__items" v-if="messageType === 1">
			<text class="message-details__time">18:20</text>
			<one-message-other :data="messageItems[0]"></one-message-other>
			<one-message-me :data="messageItems[1]"></one-message-me>
		</view>

		<view class="message-details__items" v-if="messageType === 2">
			<text class="message-details__time">14:20</text>
			<one-message-me :data="messageItems[2]"></one-message-me>
			<one-message-me :data="messageItems[3]"></one-message-me>	
			<one-message-other :data="messageItems[4]"></one-message-other>
			<one-message-me :data="messageItems[5]"></one-message-me>
			<one-message-other :data="messageItems[6]"></one-message-other>
		</view>

		<view class="message-details__items" v-if="messageType === 3">
		</view>

		<view class="message-details__items" v-if="messageType === 4">
			<text class="message-details__time">2025年2月17日11：34</text>
			<one-message-other :data="messageItems[7]"></one-message-other>
			<one-message-other :data="messageItems[8]">
				<index-ver-item :data="data.data"></index-ver-item>
			</one-message-other>
		</view>

		<view class="message-details__items" v-if="messageType === 5">
			<text class="message-details__time">18:45</text>
			<one-message-me :data="messageItems[9]"></one-message-me>
			<one-message-me :data="messageItems[10]"></one-message-me>
			<one-message-other :data="messageItems[11]"></one-message-other>
			<one-message-me :data="messageItems[12]"></one-message-me>
			<one-message-other :data="messageItems[13]"></one-message-other>
		</view>
		
		<!-- 发送信息 -->
		<view class="message-details__post flex">
			<input type="text" class="message-details__post-input" />
			
			<image class="message-details__post-icon" src="/static/images/messagePostImg.png" mode="aspectFill"></image>
			
			<view class="message-details__post-btn">
				发送
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'; // 引入生命周期钩
	import oneMessageMe from './oneMessageMe/oneMessageMe.vue'
	import oneMessageOther from './oneMessageOther/oneMessageOther.vue'
	import indexVerItem from '@/components/indexVerItem/indexVerItem.vue';

	const data = ref({
		id: 'data01',
		data: {
			image: 'http://localhost:3000/images/items/银色耳机.jpg',
			name: '银色耳机',
			status: '寻找中',
			date: '2025-01-08',
			type: '用品'
		}
	})

	const messageItems = ref([
		// 第一个
		{
			avatar: '../../../../../static/images/avatar/userAvatar01.png',
			mes: '你好，你的耳机我找到了，在图书馆一楼，现在我放在一楼图书馆工作人员那里了。',
		},
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			mes: '好的，谢谢',
		},
		// 第二个
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			image: 'http://localhost:3000/images/items/白色水杯.jpg',
		},
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			mes: '你好，这个白色的水杯是不是你呀，到时候我怎么给你呢这个水杯',
		},
		{
			avatar: '../../../../../static/images/avatar/userAvatar02.jpg',
			mes: '你好，你宿舍在哪里呀，我到时候过 来拿',
		},
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			mes: '我在东九，要不明天中午12点在陶园门口？',
		},
		{
			avatar: '../../../../../static/images/avatar/userAvatar02.jpg',
			mes: '好呀',
		},
		// 人工智能
		{
			avatar: '../../../../../static/images/avatar/ai.svg',
			mes: '根据你的搜索频次以及发布的信息进行匹配，你关心的物品有新动态了！',
		},
		{
			avatar: '../../../../../static/images/avatar/ai.svg',
		},
		// 客服
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			image: 'http://localhost:3000/images/items/白色水杯.jpg',
		},
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			mes: '你好，这个白色水杯有两个人到我这 里来认领了，前面的可能认领错了',
		},
		{
			avatar: '../../../../../static/images/avatar/kefu.png',
			mes: '好的，你能提供冒领的人员信息嘛？',
		},
		{
			avatar: '../../../../../static/images/userAvatar.jpg',
			mes: '她昵称为“不吃香菜”',
		},
		{
			avatar: '../../../../../static/images/avatar/kefu.png',
			mes: '好的，这边会向本人进行专门核实的',
		},
	])

	const messageType = ref(1)
	
	onLoad((options)=>{
		console.log('用户消息详情页面的路径参数：',options);
		uni.setNavigationBarTitle({
			title:options.messageName,
		})

		switch(options.messageName) {
			case 'xioayy':
				messageType.value = 1
				break
			case '不吃香菜':
				messageType.value = 2
				break
			case '小菜一碟':
				messageType.value = 3
				break
			case '智能推荐助手':
				messageType.value = 4
				break
			case '客服':
				messageType.value = 5
				break
		}
	})

</script>

<style lang="scss" scoped>
.message-details{
	height: 100%;
	background-color: #f2f2f2;
	padding-top: 30rpx;
	&__items{
		width: 100%;
		box-sizing: border-box;
		padding: 0 45rpx;
	}
	
	&__time{
		display: inline-block;
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #797979;
		margin-bottom: 30rpx;
	}

	&__post{
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;
		position: fixed;
		bottom: 50rpx;
		&-input{
			width: 512rpx;
			height: 48rpx;
			border-radius: 20rpx;
			background-color: #f2f2f2;
		}
		
		&-icon{
			width: 48rpx;
			height: 48rpx;
			margin-left: 25rpx;
			margin-right: 21rpx;
		}
		
		&-btn{
			width: 84rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 24rpx;
			color: #333333;
			background-color: #81d3f8;
			border-radius: 20rpx;
		}
	}
}
</style>
